<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#div1{
				width: 100px;
				height: 100px;
				border: 1px solid black;
			}
			#div2{
				width: 100px;
				height: 100px;
				border: 1px solid black;
			}
			
			#div3{
				width: 100px;
				height: 100px;
				border: 1px solid black;
			}
			#div4{
				width: 100px;
				height: 100px;
				border: 1px solid black;
				background: red;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			div1
		</div>
		<div id="div2">
			div2
		</div>
		<div id="div3">
			div3
		</div>
		<div id="div4">
			
		</div>
		
		用户名： <input type="text" name="name" /><br />
		
		<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			$(function(){
				//鼠标点击事件
				//1.点击div1的时候，div2的背景色变成绿色
				$("#div1").click(function(){
					$("#div2").css("background","green");
					$(this).css("background","red");
				});
				
				//鼠标悬浮的事件（鼠标移动到div1上，div2 1s之内消失）
				//隐藏之后div1的背景色设置为橘色
				$("#div1").mouseover(function(){
					$("#div2").hide(1000,function(){
						$("#div1").css("background","orange");
					});
				});
				
				//鼠标离开事件
				//div2 1s之内显示出来，div的颜色复原
				$("#div1").mouseout(function(){
					$(this).next().show(1000,function(){
						$("#div1").css("background","white");
					})
				});
				
				//键盘事件
				//1.keydown键按下
				$("input").keydown(function(){
					$(this).val("按下啦~");
				});
				//2.键抬起
				$("input").keyup(function(){
					$(this).val("");
					$("#div1").css("background","white");
				});
				
				//3.产生可打印字符
				$("input").keypress(function(){
					$("#div1").css("background","#FFA500");
					
				});
				
				//回车事件
				$(document).keydown(function(e){
					if(e.keyCode=="13"){
						alert('您按的是回车键');
					}else{
						//alert(e.keyCode);
					}
				});
				//当调整浏览器时， 触发resize
				$(window).resize(function(){
					alert('你调整了浏览器的大小');
				});
				
				//绑定事件bind
				//鼠标悬浮和离开事件
				$("#div3").bind("click",function(){
					$(this).css("background","#FFFF00");
				});
				
				//绑定多个事件
				$("#div3").bind(
					{
						mouseover:function(){
							$("#div1").hide(500);
						},
						mouseout:function(){
							$("#div1").show(500);
						}
					}
				);
				
				//移除单个事件
				$("#div3").unbind("click");
				//移除所有事件
				$("#div3").unbind();
				
				//复合事件，鼠标的悬浮与离开
				/*$("#div3").hover(function(){
					$(this).css("background","red");
				},function(){
					$(this).css("background","green");
				});*/
				
				//toggle事件
				/*$("#div3").toggle(function(){
					$(this).css("background","red");
				},function(){
					$(this).css("background","green");
				},function(){
					$(this).css("background","yellow");
				});*/
				
				//动画
				//淡入和淡出
				$("#div3").hover(function(){
					//$("#div4").fadeOut(1000);
					$("#div4").slideUp(1000,function(){
						alert('执行完毕');
					});
				},function(){
					//$("#div4").fadeIn(1000);
					$("#div4").slideDown(1000);
					$("#div4").css("background","red");
				});
				
				
			});
		</script>
		
	</body>
</html>
